<template>
  <div class="cart-complete-wrap">
    <div class="cart-complete">
      <h3><i class="sui-icon icon-pc-right"></i>商品已成功加入购物车！</h3>
      <div class="goods">
        <div class="left-good">
          <div class="left-pic">
            <img :src="`/images` + skuInfo[0].simage" alt="" />
          </div>
          <div class="right-info">
            <p class="title">{{ skuInfo[0].sname }}</p>
            <p class="attr">
              尺码：{{ skuInfo[0].sizenum }} &nbsp;&nbsp;&nbsp; 数量：{{
                $route.query.skuNum
              }}
            </p>
          </div>
        </div>
        <div class="right-gocart">
          <!-- <a href="javascript:" class="sui-btn btn-xlarge">查看商品详情</a> -->
          <router-link class="sui-btn btn-xlarge" :to="`/detail/${skuInfo.sid}`"
            >查看商品详情</router-link
          >
          <!-- <router-link to="/trade">去结算</router-link> -->
          <a @click="addShopCartList()">去结算</a>
          <!-- <router-link to="/shopcart">去结算</router-link> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddCartSuccess",
  data() {
    return {
      skuNum: 1,
      active: 0,
    };
  },
  computed: {
    skuInfo() {
      return JSON.parse(sessionStorage.getItem("SKUINFO"));
    },
  },
  methods: {
    //加入购物车的回调函数
    addShopCartList() {
      //1、发请求，将产品加入到数据库（通知服务器）
      try {
        this.$store.dispatch("addCartList", {
          sid: this.$route.params.sid,
          skuNum: this.$route.query.skuNum,
        });
        //路由跳转
        //在路由跳转的时候还需要将产品都信息带给下一级的路由组件
        //一些简单的数据skuNum。通过query形式给路由组件传递过去
        //产品信息的数据【比较复杂：skuInfo】，通过会话存储（不持久化，会话结束数据再消失）
        //本地存储|会话存储，一般存储的是字符串
        sessionStorage.setItem("SKUINFO", JSON.stringify(this.skuInfo));
        this.$router.push({
          name: "shopcart",
          query: { skuNum: this.skuNum },
        });
      } catch (error) {
        alert(error.message);
      }
      console.log(this.skuNum);
    },
  },
};
</script>

<style lang="less" scoped>
.cart-complete-wrap {
  background-color: #f4f4f4;

  .cart-complete {
    width: 1200px;
    margin: 0 auto;

    h3 {
      font-weight: 400;
      font-size: 16px;
      color: #6aaf04;
      padding-top: 15px;
      padding-bottom: 15px;
      margin: 0;

      .icon-pc-right {
        background-color: #fff;
        border: 2px solid #6aaf04;
        padding: 3px;
        margin-right: 8px;
        border-radius: 15px;
      }
    }

    .goods {
      overflow: hidden;
      padding: 10px 0;

      .left-good {
        float: left;

        .left-pic {
          border: 1px solid #dfdfdf;
          width: 60px;
          float: left;
          img {
            width: 60px;
            height: 60px;
          }
        }

        .right-info {
          color: #444;
          float: left;
          margin-left: 10px;

          .title {
            width: 100%;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
          }

          .attr {
            color: #aaa;
          }
        }
      }

      .right-gocart {
        float: right;

        a {
          padding: 7px 36px;
          font-size: 15px;
          line-height: 22px;
          color: #333;
          background-color: #eee;
          text-decoration: none;
          box-sizing: border-box;
          border: 1px solid #e1e1e1;
        }

        a:hover {
          background-color: #f7f7f7;
          border: 1px solid #eaeaea;
        }

        a:active {
          background-color: #e1e1e1;
          border: 1px solid #d5d5d5;
        }

        .btn-danger {
          background-color: #e1251b;
          color: #fff;
        }

        .btn-danger:hover {
          background-color: #e1251b;
        }
      }
    }
  }
}
</style>